<template>
  <div class="comment-info" v-if="Object.keys(commentInfo).length !== 0">
     <div class="info-header">
       <div class="header-title">用户评价</div>
       <div class="header-more">
         更多
         <span class="arrow-rigth"></span>
       </div>
     </div>
     <div class="info-user">
       <img :src="commentInfo.user.avatar" alt="">
       <span>{{commentInfo.user.uname}}</span>
     </div>
     <div class="info-detail">
       <p>{{commentInfo.content}}</p>
       <div class="info-other">
         <span class="date">{{commentInfo.created|showDate}}</span>
         <span>{{commentInfo.style}}</span>
       </div>
       <div class="info-images">
         <img :src="item" alt="" v-for="(item,index) in commentInfo.images" :key="index" @load="ImgComLoad">
       </div>
     </div>
  </div>
  <div v-else>
     <span class="none">暂无评论</span>
  </div>
</template>

<script>
  import {formatDate} from '../../../common/utils'

  export default {
    name:"DetailCommentInfo",
    props:{
      commentInfo:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    filters:{
      //注意value是秒数，new Date() 要的是毫秒数
      showDate(value){
        let date = new Date(value * 1000)
        return formatDate(date,'yyyy-MM-dd mm:hh:ss')
      }
    },
    methods:{
      ImgComLoad(){
      this.$emit('ImgComLoad')
     }
    }
  }
</script>

<style scoped>
  .comment-info {
    padding: 0 20px;
    color: #333;
    border-bottom: 5px solid #f2f5f8;
  }

  .info-header {
    height: 55px;
    line-height: 55px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    font-size: 18px;
  }

  .info-header .header-title {
    float: left;
  }

  .info-header .header-more {
    position: relative;
    float: right;
    padding-right: 10px;
    font-size: 17px;
  }

  .header-more .arrow-rigth {
    position: absolute;
    top: 21px;
    display: inline-block;
    height: 12px;
    width: 12px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    transform: rotate(45deg);
  }

  .info-user {
    width: 100%;
    padding: 10px 0 5px;
  }

  .info-user img {
    width: 15%;
    height: 15%;
    border-radius: 50%;
  }

  .info-user span {
    margin-left: 15px;
    font-size: 18px;
  }

  .info-detail {
    padding: 10px 0 20px 0;
  }

  .info-detail p {
    line-height: 1.5;
    color:#777;
    font-size: 16px;
  }

  .info-detail .info-other {
    color: #999;
    font-size: 15px;
    padding: 10px 0;
  }

  .info-detail .info-other .date {
    margin-right: 10px;
  }

  .info-images {
    width: 100%;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
  }

  .info-images img {
    width: 25%;
    margin: 0 5px 5px 0;
  }

  .none {
    width: 100%;
    display: inline-block;
    padding: 10px 20px;
    color: #333;
    border-bottom: 5px solid #f2f5f8;
    font-size: 16px;
  }
</style>